<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<body>
<div id="app">
    <p>{{ message }}</p>
    <span>以下通过axios获取的数据:</span>
    <p> {{ info_qs }}</p>
    <p> {{ info }}</p>
</div>


<!--引入vue -->
<script src="/components/vue/2.6.10/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="/components/axios/0.19.0/dist/axios.js"></script>
<script src="/components/qs/6.9.0/dist/qs.js"></script>

<script>
    //在 new Vue(...) 之前使用 Vue 的插件语法注册一个 $qs 属性：

    Vue.use({
        install(Vue) {
            Object.defineProperty(Vue.prototype, "$qs", {
                writable: false,
                value: window.Qs
            });
        }
    });
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            info_qs: 'qs跨域了就没内容',
            info: '跨域了就没内容'
        },
        mounted() {
            const params_qs = {id: 12345,qs:"test"};
            axios.post('https://www.runoob.com/try/ajax/json_demo.json', this.$qs.stringify(params_qs))
                .then(response => {
                    this.info_qs = response;
                    console.log(response);
                })
                .catch(error => {
                    console.log(error);
                });
            const params = {id: 12345};
            axios.get('https://www.runoob.com/try/ajax/json_demo.json', {
                params: params
            }).then(function (response) {
                this.info = response;
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        }
    })

</script>
</body>
</html>
